<template>
  <el-card shadow="never" class="aui-card-list-query" v-if="$scopedSlots.default">
    <el-form :model="dataForm" @keyup.enter.native="queryEvent()" label-position="right" :label-width="labelWidth" :rules="rules">
      <el-row :gutter="gutter">
        <slot></slot>
        <template v-if="otherShow">
          <slot name="other"></slot>
        </template>
        <div style="text-align:right;padding-bottom: 14px;">
          <el-button @click="queryEvent()" type="primary">{{
                $t('query')
              }}</el-button>
          <el-button @click="searchReset()">{{ $t('reset') }}</el-button>
          <div class="uni-search-toggle" @click="clickEvent">
            <template v-if="$scopedSlots.other">
              <template v-if="!otherShow">
                <span>展开</span>
                <i class="el-icon-arrow-down"></i>
              </template>
              <template v-else>
                <span>收起</span>
                <i class="el-icon-arrow-up"></i>
              </template>
            </template>
          </div>
        </div>
      </el-row>
    </el-form>
  </el-card>
</template>

<script>
export default {
  props: {
    // value: {
    //   type: Object,
    //   default () {
    //     return {}
    //   }
    // },
    // 标题宽度
    labelWidth: {
      type: String,
      default () {
        return '90px'
      }
    },
    // 间距
    gutter: {
      type: Number,
      default () {
        return 10
      }
    },
    // 查询面板状态
    queryShow: {
      type: Boolean,
      default () {
        return false
      }
    },
    rules: {
      type: Object,
      default () {
        return null
      }
    },
    dataForm: {
      type: Object,
      default () {
        return {}
      }
    }
  },
  watch: {
    queryShow (val) {
      this.otherShow = val
    }
  },
  data () {
    return {
      otherShow: false
    }
  },
  mounted () {
    // console.log(this.$slots, '$slots')
    // console.log(this.$scopedSlots, '$scopedSlots')
  },
  methods: {
    queryEvent () {
      this.$emit('query-click', this.dataForm)
    },
    clickEvent (val) {
      this.otherShow = !this.otherShow
      this.$emit('click', this.otherShow)
    },
    searchReset () {
      this.$emit('searchReset')
    }
  }
}
</script>

<style lang="scss">
.uni-search-toggle {
  margin-left: 10px;
  font: 12px;
}
.aui-card-list-query > .el-card__body {
  padding-top: 20px;
  padding-bottom: 8px;
  padding-left: 20px;
  padding-right: 20px;
  > .el-form {
    > .el-row > .el-col > .el-form-item > .el-form-item__content {
      .el-date-editor.el-input,
      .el-date-editor.el-input__inner {
        width: 100%;
      }
      > .el-select {
        width: 100%;
      }
      > .el-input-group {
        vertical-align: middle;
      }
    }
  }
}
</style>
